JavaScript Nullish Coalescing: Padronanza dell'assegnazione di valori predefiniti

Gli sviluppatori JavaScript spesso necessitano di assegnare valori predefiniti quando una variabile è null o undefined. Prima di ES2020, l'operatore OR logico (||) era il metodo principale per raggiungere questo obiettivo. Tuttavia, l'introduzione dell'operatore nullish coalescing (??) fornisce una soluzione più precisa e affidabile. Questa guida completa esplora le sfumature del nullish coalescing, i suoi vantaggi e esempi pratici per aiutarti a padroneggiare questa potente funzionalità.

Comprendere il Nullish Coalescing (??)

L'operatore nullish coalescing (??) è un operatore logico che restituisce il suo operando di destra quando il suo operando di sinistra è null o undefined. Altrimenti, restituisce il suo operando di sinistra.

Sintassi:

            operandoSinistro ?? operandoDestro
            

              
                Copy
              
            
          

Differenza chiave rispetto all'OR Logico (||):

L'operatore OR logico (||) restituisce l'operando di destra se l'operando di sinistra è qualsiasi valore falsy (null, undefined, 0, '', NaN, false). Questo può portare a comportamenti inaspettati quando si intende gestire solo valori null o undefined.

Perché usare il Nullish Coalescing?

Il nullish coalescing offre diversi vantaggi rispetto al tradizionale operatore OR logico:

• Precisione: Mira specificamente a null e undefined, evitando assegnazioni predefinite non intenzionali per altri valori falsy.
• Leggibilità: Comunica chiaramente l'intento di gestire solo i casi null o undefined, migliorando la manutenibilità del codice.
• Sicurezza: Previene comportamenti inaspettati causati da valori falsy che attivano involontariamente assegnazioni predefinite.

Esempi pratici

1. Assegnazione di valore predefinito di base

Assegnare un valore predefinito a una variabile se è null o undefined:

            const userName = user.name ?? 'Ospite';
console.log(userName); // Output: 'Ospite' se user.name è null o undefined, altrimenti il nome utente effettivo
            

              
                Copy
              
            
          

2. Gestione delle risposte API

Recuperare dati da un'API e fornire un valore predefinito se alla risposta manca una proprietà specifica:

            const apiResponse = {
  data: {
    city: null,
  },
};

const cityName = apiResponse.data.city ?? 'Città sconosciuta';
console.log(cityName); // Output: 'Città sconosciuta'
            

              
                Copy
              
            
          

3. Configurazioni predefinite

Impostare opzioni di configurazione predefinite per un componente o modulo:

            const config = {
  theme: userSettings.theme,
  animationSpeed: userSettings.animationSpeed ?? 'normale',
};

console.log(config.animationSpeed); // Output: 'normale' se userSettings.animationSpeed è null o undefined
            

              
                Copy
              
            
          

4. Gestione delle preferenze utente

Consentire agli utenti di personalizzare le impostazioni e fornire valori predefiniti se non hanno specificato una preferenza:

            let userVolume = localStorage.getItem('volume'); //potrebbe restituire null
let volume = userVolume ?? 0.5; // imposta un volume predefinito di 0.5

console.log(`Il volume dell'utente è ${volume}`);
            

              
                Copy
              
            
          

5. Concatenazione di Nullish Coalescing

Puoi concatenare l'operatore nullish coalescing per fornire una cascata di valori predefiniti:

            const setting = userSetting.displaySetting.theme ?? defaultSettings.theme ?? 'chiaro';
console.log(setting); // Output: Il primo valore non-null/undefined dalla catena
            

              
                Copy
              
            
          

6. Lavorare con le funzioni

Assegnare una funzione predefinita se la funzione fornita è null o undefined:

            const logMessage = logger.log ?? (() => console.log('Nessun logger disponibile.'));
logMessage('Questo è un messaggio di prova.');
            

              
                Copy
              
            
          

Nullish Coalescing con Optional Chaining

L'operatore nullish coalescing si abbina perfettamente con l'optional chaining (?.), consentendo di accedere in modo sicuro a proprietà annidate senza causare errori se una proprietà intermedia è null o undefined.

Esempio:

            const user = {
  profile: {
    address: {
      city: null,
    },
  },
};

const cityName = user?.profile?.address?.city ?? 'Città sconosciuta';
console.log(cityName); // Output: 'Città sconosciuta'
            

              
                Copy
              
            
          

In questo esempio, se una qualsiasi delle proprietà (user, profile, address o city) è null o undefined, l'optional chaining si interromperà e l'operatore nullish coalescing restituirà il valore predefinito 'Città sconosciuta'.

Casi d'uso comuni nelle applicazioni globali

Considera questi scenari internazionali in cui il nullish coalescing può essere particolarmente utile:

• Localizzazione: Fornire traduzioni predefinite basate sulla localizzazione dell'utente. Se una traduzione non è disponibile per una lingua specifica, è possibile implementare un fallback a una lingua predefinita (ad esempio, inglese).
• Formattazione della valuta: Visualizzare valori di valuta con la formattazione appropriata in base alla regione dell'utente. Se le impostazioni regionali non sono disponibili, è possibile applicare un formato di valuta predefinito.
• Formattazione di data e ora: Formattare date e ore in base alla localizzazione dell'utente. Se le informazioni sulla localizzazione sono mancanti, è possibile utilizzare un formato di data e ora predefinito.
• Formattazione dell'indirizzo: Visualizzare le informazioni sull'indirizzo nel formato corretto per diversi paesi. Se il paese non è specificato, è possibile utilizzare un formato di indirizzo predefinito.

Esempio: Fallback di Localizzazione

            const translatedText = localizedStrings[userLocale]?.greeting ?? localizedStrings['en-US'].greeting ?? "Ciao!";
console.log(translatedText);
            

              
                Copy
              
            
          

Best Practices

• Utilizza ?? per controlli null/undefined: Preferisci ?? rispetto a || quando vuoi gestire specificamente valori null o undefined.
• Combina con optional chaining: Usa ?? in congiunzione con optional chaining (?.) per accedere in modo sicuro a proprietà annidate.
• Evita complessità inutili: Mantieni il tuo codice pulito e leggibile utilizzando ?? solo quando fornisce un chiaro vantaggio.
• Considera la compatibilità del browser: Assicurati che i tuoi browser di destinazione supportino l'operatore nullish coalescing (ES2020). Se è necessario supportare browser più vecchi, utilizza un transpiler come Babel.
• Revisioni del codice: Incoraggia le revisioni del codice per garantire l'uso corretto dell'operatore nullish coalescing, in particolare in grandi progetti internazionali in cui interpretazioni errate dei valori falsy possono avere implicazioni significative.

Compatibilità con i browser

L'operatore nullish coalescing è una funzionalità relativamente nuova in JavaScript (ES2020). Assicurati che i tuoi browser di destinazione lo supportino, o usa un transpiler come Babel per fornire compatibilità con browser più vecchi. Considera le statistiche di utilizzo della tua applicazione. Ad esempio, un progetto rivolto a utenti in paesi con adozione tecnologica più lenta potrebbe richiedere la transpilation più di uno rivolto a utenti in regioni tecnologicamente avanzate.

Insidie da evitare

• Mescolare ?? e || con &&: Quando si combinano l'operatore nullish coalescing (??) o l'operatore OR logico (||) con l'operatore AND logico (&&) senza parentesi esplicite, JavaScript genera un errore di sintassi. Usa sempre le parentesi per chiarire l'ordine delle operazioni.
• Confondere ?? con ||: Ricorda la differenza cruciale: ?? controlla solo null e undefined, mentre || controlla qualsiasi valore falsy.

Esempio di insidia 1 (Errore di sintassi):

            // Questo genererà un SyntaxError:
// const value = a ?? b && c;

// Modo corretto (usando le parentesi):
const value = a ?? (b && c);
const value2 = (a ?? b) && c;
            

              
                Copy
              
            
          

Alternative al Nullish Coalescing (per browser più vecchi)

Se devi supportare browser più vecchi che non supportano l'operatore nullish coalescing, puoi utilizzare le seguenti alternative:

• Operatore OR logico (||): Come accennato in precedenza, questo è l'approccio tradizionale. Tuttavia, fai attenzione al problema dei valori falsy.
• Operatore ternario: Un modo più verboso ma esplicito per controllare null o undefined.

Esempio: Operatore Ternario

            const value = a === null || a === undefined ? defaultValue : a;
            

              
                Copy
              
            
          

Conclusione

L'operatore nullish coalescing (??) è un'aggiunta preziosa al linguaggio JavaScript, che fornisce un modo più preciso e leggibile per gestire le assegnazioni di valori predefiniti quando si tratta di valori null o undefined. Comprendendo i suoi vantaggi e le sue sfumature, puoi scrivere codice più pulito, sicuro e manutenibile. Combinandolo con l'optional chaining, migliora ulteriormente la tua capacità di gestire graziosamente strutture dati complesse. Mentre costruisci applicazioni per un pubblico globale, considera le implicazioni dei valori null e undefined in diversi contesti culturali e regionali e sfrutta il nullish coalescing per fornire un'esperienza coerente e user-friendly per tutti.